<template>
    <el-card class="content small-padding-card">
        <top-label v-model="index" class="move-up">
            <span :slot="0">实时数据</span>
            <span :slot="1">卫星状况</span>
            <!-- <span :slot="2">在线监测</span> -->
        </top-label>
        <real-time-chart v-if="index===0" :node='nodes'></real-time-chart>
        <satellite-status v-if="index===1" :node='nodes'></satellite-status>
        <!-- <online-monitor v-if="index===2"></online-monitor> -->
    </el-card>
</template>

<script>
    import TopLabel from "~/components/TopLabel";
    import RealTimeChart from "~/views/monitor-control/online-monitoring/surface-displacement/RealTimeChart";
    import SatelliteStatus from "~/views/monitor-control/online-monitoring/surface-displacement/SatelliteChart";
    import OnlineMonitor from "~/views/monitor-control/online-monitoring/surface-displacement/OnlineMonitor";
    export default {
        name: "SurfaceDisplacement",
        components: {OnlineMonitor, SatelliteStatus, RealTimeChart, TopLabel},
        props:{
            node:Object
        },
        data(){
            return {
                index:0,
                nodes:{}
            }
        },created(){
            console.log(this.node);
            this.nodes = this.node;
            console.log(this.nodes);
        }
    }
</script>

<style scoped>
    .content{
        padding-left: 6px;
    }
    .move-up{
        transform: translateY(-5px);
    }
</style>